<div id="hotelDiv">
    <!-- blog breadcrumb version one strat here -->
    <section class="breadcrumb-blog-version-one">
        <div class="single-bredcurms" style="background-image:url('/reception/images/bercums/Hotels-Version-02.jpg');">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="bredcrums-content">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section><!-- blog breadcrumb version one end here -->

    <div class="card" style="width: 80%;margin: 30px auto;">
        <div class="card-header">
            <h5>酒店所在城市</h5>
            <div class="form-row">
                <select onchange="changeProvince()" id="province" class="form-control col-md-3">
                    <option>请选择所在省份</option>
                    <option v-for="province in provinces" v-bind:value="province.id">{{province.name}}</option>
                </select>
                <select onchange="changeCity()" id="city" class="form-control col-md-3">
                    <option>请选择所在城市</option>
                    <option v-for="city in cities" :value="city.id">{{city.name}}</option>
                </select>
                <select onchange="changeArea()" id="area" class="form-control col-md-3">
                    <option>请选择所在地区</option>
                    <option v-for="area in areas" :value="area.id">{{area.name}}</option>
                </select>
            </div>
        </div>
    </div>

    <!-- popular destination strat -->
    <section class="blog-contents-version-one pt-100 pb-70 hotels-area hotels-area-2">
        <div class="container">
            <div class="row">
                <!-- single hotels -->
                <div class="col-12 col-sm-6 col-md-6 col-lg-4" v-for="(hotelMain,index) in hotelMains">
                    <div class="single-hotels-2">
                        <div class="hotel-image" style="overflow: hidden;height:220px;">
                            <img :src="hotelMain.hotelDetail.detailImages[0].image" alt="" class="border-raduis-3">
                        </div>
                        <div class="hotel-description">
                            <a href="#"><h4>{{hotelMain.hotelName}}</h4></a>
                            <p>地址:<span>{{hotelMain.location}}</span></p>
                            <i class="fa fa-star" v-for="star in hotelMain.hotelStar"></i>
                            <div class="hotel-book-btn">
                                <a class="travel-booking-btn hvr-shutter-out-horizontal"
                                   @click="jump(hotelMain.hotelMainId)">查看详情</a>
                            </div>
                        </div>
                    </div>
                </div><!--End single hotels -->
            </div>
            <div>
                <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups"
                     v-if="pageInfo.navigatepageNums!=0" style="float: right;">
                    <div class="btn-group mr-2" role="group" aria-label="First group">
                        <button type="button" class="btn btn-secondary" onclick="jumpFront()">&laquo;</button>
                        <button type="button" class="btn btn-secondary"
                                v-for=" (value,index) in pageInfo.navigatepageNums"
                                :class="[value==pageInfo.pageNum?'active':'']"
                                :value="value"
                                @click="initHotelMains(value)">
                            {{value}}
                        </button>
                        <button type="button" class="btn btn-secondary" onclick="jumpBack()">&raquo;</button>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
<style>
    i {
        color: #37b721;
    }
</style>
<script>
    var hotelsVue = new Vue({
        el: "#hotelDiv",
        data: {
            hotelMains: [],
            provinces: [],
            cities: [],
            areas: [],
            searchBean: {
                keyword: "",
                currentPage: 1,
            },
            pageInfo: "",
        },
        methods: {
            initHotelMains: function (value) {
                var self = this;
                self.searchBean.currentPage = value;
                $.ajax({
                    async: false,
                    url: "/api/hotels",
                    type: "post",
                    contentType: "application/json",
                    data: JSON.stringify(self.searchBean),
                    success: function (rs) {
                        self.hotelMains = rs.list;
                        self.pageInfo = rs;
                        console.log(rs)
                    },
                    error: function (rs) {
                        layer.alert(rs.responseText, {icon: 0});
                    }
                })
            },
            initProvinces: function () {
                var self = this;
                $.ajax({
                    url: "/api/cities/0",
                    type: "get",
                    success: function (rs) {
                        self.provinces = rs;
                    },
                    error: function (rs) {
                        layer.alert(rs.responseText, {icon: 0});
                    }
                })
            },
            changeProvince: function () {
                var self = this;
                var province = $("#province").val();
                $.ajax({
                    async: false,
                    url: "/api/cities/" + province,
                    type: "get",
                    success: function (rs) {
                        self.cities = rs;
                    },
                    error: function (rs) {
                        layer.alert(rs.responseText, {icon: 0});
                    }
                });
                self.searchBean.keyword = province;
                self.initHotelMains();
            },
            changeCity: function () {
                var self = this;
                var city = $("#city").val();
                $.ajax({
                    async: false,
                    url: "/api/cities/" + city,
                    type: "get",
                    success: function (rs) {
                        self.areas = rs;
                    },
                    error: function (rs) {
                        layer.alert(rs.responseText, {icon: 0});
                    }
                });
                self.searchBean.keyword = city;
                self.initHotelMains();
            },
            changeArea: function () {
                var self = this;
                var area = $("#area").val();
                self.searchBean.keyword = area;
                self.initHotelMains();
            },
            jump: function (id) {
                sessionStorage.setItem("hotelId", id);
                window.location.href = "/hotel/detail"
            },
            jumpFront: function () {
                var self = this;
                var page = $("button[class='btn btn-secondary active']").val();
                console.log(page);
                if (page !== "1") {
                    self.initHotelMains(page - 1);
                }
            },
            jumpBack: function () {
                var self = this;
                var page = $("button[class='btn btn-secondary active']").val();
                console.log(page);
                console.log(typeof page);
                console.log(typeof self.pageInfo.total);
                if (page !== self.pageInfo.total.toString()) {
                    self.initHotelMains(page + 1);
                }
            },
        },
        created: function () {
            window.changeProvince = this.changeProvince;
            window.changeCity = this.changeCity;
            window.changeArea = this.changeArea;
            window.jump = this.jump;
            window.jumpFront = this.jumpFront;
            window.jumpBack = this.jumpBack;
        },
        mounted: function () {
            this.initHotelMains(1)
            this.initProvinces()
        }
    })
</script>